import React, { useState } from "react";
import { createRoot } from 'react-dom/client';
import PropTypes from "prop-types";
import { BrowserRouter as Router, Routes, Route, NavLink, Link, useParams, useNavigate } from "react-router-dom";
import { history } from './router/history';


/* 
  模糊匹配模式
*/

const Home = () => <p>进入页面的时候，你能看到我吗？</p>
const Login = () => <p>我是Login组件的内容</p>

const App = () => (
  <Router>
    <div>
      <h3> React 路由 </h3>
      <Link to='/'> 根页面 </Link>
      <Link to='/first'> 页面一 </Link>
      <Link to='/second'> 页面二 </Link>

      <Routes>
        <Route path="/" element={<h3>根页面</h3>}></Route>
        <Route path='/first' element={<Home />}></Route>
        <Route path='/second' element={<Login />}></Route>
      </Routes>
    </div>
  </Router>
)


const root = createRoot(document.getElementById('root'))
root.render(<App />)
